0
433
ViewsUpdating State | object is not iterable (cannot read property Symbol(Symbol.iterator))
I have below JSX -
<FormGroup>
<Label for="exampleEmail" style={{fontWeight:"bold"}}>What is your e-mail address?</Label>
<Input type="email" name="email" id="exampleEmail" onChange={(e)=>setStateForProperties(e)} />
</FormGroup>
<FormGroup>
<Label for="examplePassword" style={{fontWeight:"bold"}}>What is your password?</Label>
<Input type="password" name="password" id="examplePassword" onChange={(e)=>setStateForProperties(e)}/>
</FormGroup>
State Declarations -
const iLoginCreds ={
userName:'',
password:''
}
const [loginCreds, setLoginCredentials] = useState(iLoginCreds)
onChange Method changing state -
function setStateForProperties(e)
{
alert(e.target.id);
switch (e.target.id) {
case 'exampleEmail':
setLoginCredentials(...loginCreds,{
userName:e.target.value
});
break;
case 'examplePassword':
setLoginCredentials(... loginCreds,{
password:e.target.value
});
default:
break;
}
console.log(loginCreds);
}
Error -
When I write anything in textbox (upon onchange event trigger) , I receive an error -
TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))
·
Juan Pablo Isaza
2 answers
Answer question0
You need to destruct the previous object properties and return a new object after merging with the new one.
setLoginCredentials({ ...loginCreds, ...{userName:e.target.value} })
·
Juan Pablo Isaza
Report
0
Instead of doing this:
setLoginCredentials(...loginCreds, {
userName:e.target.value
});
, which passes in 2 arguments to useState, you should move the curly braces to surround ...loginCreds, like so:
setLoginCredentials({...loginCreds,
userName:e.target.value
});
You should do the same for password.
This will change only one property on the object. React Hooks useState() with Object
·
Juan Pablo Isaza
Report
Answer question